<!DOCTYPE html>
<html>
<head>
	<title>日历组件（带农历）</title>
  <meta charset="utf-8">
</head>
<body>
<div id="app" ng-app="myApp" ng-controller="pickerCtrl">
  <div class='picker'>
    <!-- 顶部 -->
    <div class='picker-title'>1900-2100区间内的公历、农历</div>
    <div class='picker-detail'>
      <div class='picker-detail-date'>{{detail.cYear}}-{{detail.cMonth}}-{{detail.cDay}} {{detail.ncWeek}}</div>
      <div class='picker-detail-day'>{{detail.cDay}}</div>
      <div class="picker-detail-nl" ng-class="{hide:!isShowN}">{{detail.IMonthCn}}{{detail.IDayCn}}</div>
      <div class="picker-detail-sx" ng-class="{hide:!isShowN}">{{detail.Animal}}年</div>
      <div class="picker-detail-nymdr" ng-class="{hide:!isShowN}">{{detail.gzYear}}年 {{detail.gzMonth}}月 {{detail.gzDay}}日</div>
      <div class="picker-detail-jq" ng-class="{hide:!isShowN}">{{detail.Term?detail.Term:''}}</div>
      <div class='picker-detail-xz'>{{detail.astro}}</div>
    </div>
    <div class='picker-tools'>
      <div class='picker-tools-prev-year' ng-click="prevYear()">上一年</div>
      <div class='picker-tools-prev-month' ng-click="prevMonth()">上一月</div>
      <div class='picker-tools-see-month'>{{detail.cMonth}}月</div>
      <div class='picker-tools-see-year'>{{detail.cYear}}年</div>
      <div class='picker-tools-next-month' ng-click="nextMonth()">下一月</div>
      <div class='picker-tools-next-year' ng-click="nextYear()">下一年</div>
    </div>
    <!-- 展示 -->
    <div class='picker-list-w clearfix'>
      <div class='picker-list-w-r'>日</div>
      <div>一</div>
      <div>二</div>
      <div>三</div>
      <div>四</div>
      <div>五</div>
      <div class='picker-list-w-r'>六</div>    
    </div>
    <div class='picker-list clearfix'>
      <div ng-repeat="(index, item) in prevkongList" class="picker-list-item picker-list-prev" ng-class="{hide:!isPNList}" ng-click="prevFocusDetail(item.cYear,item.cMonth,item.cDay,index)">
        <div class='picker-list-item-y'>{{item.cDay}}</div>
        <div class="picker-list-item-n" ng-class="{hide:!item.isShowN}">{{item.Term?item.Term:item.IDayCn}}</div>
      </div>
      <div ng-repeat="(index, item) in dateList" class="picker-list-item" ng-class="{now:item.isNow,focus:item.isFocus}" ng-click="getFocusDetail(item.cYear,item.cMonth,item.cDay,index)">
        <div class='picker-list-item-y'>{{item.cDay}}</div>
        <div class="picker-list-item-n" ng-class="{hide:!item.isShowN}">{{item.Term?item.Term:item.IDayCn}}</div>
      </div>   
      <div ng-repeat="(index, item) in nextkongList" class="picker-list-item picker-list-next" ng-class="{hide:!isPNList}" ng-click="nextFocusDetail(item.cYear,item.cMonth,item.cDay,index)">
        <div class='picker-list-item-y'>{{item.cDay}}</div>
        <div class="picker-list-item-n" ng-class="{hide:!item.isShowN}">{{item.Term?item.Term:item.IDayCn}}</div>
      </div>
    </div>
    <!-- 菜单 -->
    <div class='picker-tools2'>
      <div class='picker-tools2-to-change' ng-click="ShowN()">显示农历</div>
      <div class='picker-tools2-to-change' ng-click="hideN()">隐藏农历</div>
      <div class='picker-tools2-to-now' ng-click="toNow()">返回今天</div>
    </div>
    <div class='picker-tools2'>
      <div class='picker-tools2-to-change' ng-click="ShowPNList()">补全前后空留日期</div>
      <div class='picker-tools2-to-change' ng-click="hidePNList()">移除前后空留日期</div>
    </div>
    <!-- 快速选择 -->
    <div class="picker-sel">
      <label>快速选择</label>
      <label>年：</label>
      <select ng-model="selected_year" ng-change="bindDateChange()">
        <option ng-repeat="option in selected_year_options" ng-value="option">{{ option }}</option>
      </select>
      <label>月：</label>
      <select ng-model="selected_month" ng-change="bindDateChange()">
        <option ng-repeat="option in selected_month_options" ng-value="option">{{ option }}</option>
      </select>
      <label>日：</label>
      <select ng-model="selected_day" ng-change="bindDateChange()">
        <option ng-repeat="option in selected_day_options" ng-value="option">{{ option }}</option>
      </select>
    </div>
  </div>
</div>
</body>
<link rel="stylesheet" type="text/css" href="picker.css">
<script src="angular.js"></script>
<script src="calendar.js"></script>
<script src="picker.js"></script>
</html>